<!doctype html>
<html>
    <head>
        <title></title>
        <script type="text/javascript" src="../internal.js"></script>
        <style type="text/css">
            .section {
                text-align: center;
                margin-top: 10px;
            }
            .section input {
                margin-left: 5px;
                width: 70px;
            }
        </style>
    </head>
    <body>
        <div class="section">
            <span><var id="lang_tdBkColor"></var></span>
            <input type="text" id="J_tone" />
        </div>
        <script type="text/javascript">
            var tone = $G('J_tone'),
                colorPiker = new UE.ui.ColorPicker({
                    editor: editor,
                }),
                colorPop = new UE.ui.Popup({
                    editor: editor,
                    content: colorPiker,
                });
            domUtils.on(tone, 'click', function () {
                colorPop.showAnchor(tone);
            });
            domUtils.on(document, 'mousedown', function () {
                colorPop.hide();
            });
            colorPiker.addListener('pickcolor', function () {
                tone.value = arguments[1];
                colorPop.hide();
            });
            colorPiker.addListener('picknocolor', function () {
                tone.value = '';
                colorPop.hide();
            });
            dialog.onok = function () {
                editor.execCommand('edittd', tone.value);
            };

            var start = editor.selection.getStart(),
                cell = start && domUtils.findParentByTagName(start, ['td', 'th'], true);
            if (cell) {
                var color = domUtils.getComputedStyle(cell, 'background-color');
                if (/^#/.test(color)) {
                    tone.value = color;
                }
            }
        </script>
    </body>
</html>
